<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>forEach</title>
	</head>
	<body>
		<p>点击按钮计算数组所有元素相加的总和。</p>
		<button>点我</button>
		<p>数组元素总和：<span id="demo"></span></p>
		<script src="js/jquery-3.4.1.min.js"></script>
		<script type="module">
			var sum = 0;
			var numbers = [65, 44, 12, 4];

			// $('button').on('click', function(){
			// 	numbers.forEach(function(val){
			// 		sum += val;
			// 		$('#demo').html(sum);
			// 		// demo.innerHTML = sum;
			// 	})
			// })

			$('button').on('click', function() {
				$.each(numbers, function(key, val) {
					sum += val;
					$('#demo').html(sum);
					// demo.innerHTML = sum;
				})
			})

			let obj = {
				a: 1,
				b: 2,
				c: 3
			};
			// function filterObj(obj, arr) {
			// 　　 if (typeof (obj) !== "object" || !Array.isArray(arr)) {
			// 　　　　throw new Error("参数格式不正确")
			// 　　 }
			// 　　const result = {}
			// 　　Object.keys(obj).filter((val) => !arr.includes(val)).forEach((val) => {
			// 　　　　 result[val] = obj[val]
			// 　　})
			// 　　return result
			// }
			function filterObj(obj, arr) {
				var temp = {};
				var filterObj = Object.keys(obj).filter(function(val) {
					return !arr.includes(val)
				});
				var tempVal = filterObj.forEach(function(val) {
					temp[val] = obj[val]
				})
				return temp
			}
			let newObj = filterObj(obj, ["a", "b"]);
			// console.log(newObj)

			// import treeAll from './js/orgTreeAll.js' 
			{
				const generateRandomArrays = (length = 100000) => {
					const randomArray = [];
					for (let i = 0; i < length; i++) {
						randomArray.push(Math.random())
					}
					return randomArray
				}
				const randomArrays = generateRandomArrays(100000 * 1)
				console.time("for运算时间")
				for (let i = 0; i < randomArrays.length; i++) {
					randomArrays[i] = Math.floor(randomArrays[i] * 10 * 100000)
					// console.log(randomArrays[i], i)
				}
				console.timeEnd("for运算时间")

				// console.time("forEach运算时间")
				// randomArrays.forEach((item, index) => {
				// 	item = Math.floor(item * 10 * 100000)
				// 	console.log(item, index)
				// })
				// console.timeEnd("forEach运算时间")

				// console.time("map运算时间")
				// randomArrays.map((item, index) => {
				// 	item = Math.floor(item * 10 * 100000)
				// 	console.log(item, index)
				// })
				// console.timeEnd("map运算时间")

				// console.time("forin运算时间")
				// for (let i in randomArrays) {
				// 	randomArrays[i] = Math.floor(randomArrays[i] * 10 * 100000)
				// 	console.log(randomArrays[i], i)
				// }
				// console.timeEnd("forin运算时间")
			}

			{
				// 1、数组为基本数据类型时，forEach和map都不会改变原数组；使用return 返回时，forEach返回undefined,map返回一个处理后的新数组
				let arr = [1, 2, 3, 4, 5];
				let arrforEach = arr.forEach((item) => {
					return item * 2
				})
				console.log(arr, 'refForEach'); // [1, 2, 3, 4, 5]
				console.log(arrforEach, 'ref'); // undefined
				let arr1 = [1, 2, 3, 4, 5]
				let arrMap = arr1.map(item => {
					return item * 2
				})
				console.log(arr1, 'refMap') // [1, 2, 3, 4, 5]
				console.log(arrMap, 'ref') // [2, 4, 6, 8, 10]

				// 2、数组为引用数据类型时,forEach和map都会改变原数组上的对象；使用return时，forEach返回undefined，map返回处理后的数据，未返回的元素返回undefined
				let arrObj1 = [{
						username: 'lmf',
						age: 20
					},
					{
						username: 'yl',
						age: 30
					}
				];
				let arrObj1ForEach = arrObj1.forEach(item => {
					if (item.username === 'lmf') return item.age = 100
				})
				console.log(arrObj1, 'reactiveForEach') // { username: 'lmf', age: 100 } , { username: 'yl', age: 30 }
				console.log(arrObj1ForEach) // undefined
				let arrObj2 = [{
						username: 'lmf',
						age: 50
					},
					{
						username: 'yl',
						age: 60
					}
				]
				let arrObj2Map = arrObj2.map(item => {
					if (item.username === 'lmf') return item.age = 200
				})
				console.log(arrObj2, 'reactiveMap') // { username: 'lmf', age: 200 } , { username: 'yl', age: 60 }
				console.log(arrObj2Map) //  [200, undefined]

				// 3、return其实就是跳出本次循环，进行下次循环，都是对最后返回的新数组产生影响，如果都定义sum在循环里操作，返回值都会相等
				const array1 = [1, 2, 3, 4, 5]
				let sum1 = 0
				array1.forEach((element) => {
					if (element === 3) {
						return // 这句后面的代码此次循环都不会执行，所以对sum1不会有影响，如果返回'23',那么返回的新数组此元素也会返回'23'
					}
					console.log(element, 'forEachVal') // 1, 2, 4, 5
					sum1 += element
				})
				console.log(array1, 'forEachReturn') // undefined 
				console.log(sum1, 'forEachSum') // 输出: 12

				const array2 = [1, 2, 3, 4, 5]
				let sum2 = 0
				const newArray = array2.map((element) => {
					if (element === 3) {
						return // 这句后面的代码此次循环都不会执行， 所以对sum2不会有影响
					}
					console.log(element) // 1, 2, 4, 5
					sum2 += element
					return element * 2
				})
				console.log(newArray, 'mapReturn') // 输出: [2, 4, undefined, 8, 10]
				console.log(sum2, 'mapSum') // 12

				// 4、map 方法支持链式调用
				const array3 = [1, 2, 3, 4, 5];
				const doubledSum = array3
					.map((element) => element * 2)
					.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
				console.log(doubledSum, 'chainTypeMap'); // 输出: 30
			}

			{
				const arrF = [{
						name: 'ab',
						age: 18
					},
					{
						name: 'cd',
						age: 21
					}
				]
				arrF.forEach((val) => {
					// if (val.age <= 18) return
					console.log(val, 'val')
					arrF.forEach((val2) => {
						console.log(val2, 'val2')
						arrF.forEach((val3) => {
							console.log(val3, 'val3')
						})
					})
				})
			}
		</script>
	</body>
</html>